<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
  <embed src="yinyue01.mp3" type="audio/mpeg" hidden="true" autostart="true" loop="1">
</head>

<body>
  <div class="container" id="header">
    <img src="https://pic.pimg.tw/noktaleweted/1635010138-2684982505-g.gif" alt="background-image" class="bg-img">
    <div class="gameContainer" id="header">
      <div class="memoryCard" data-image="tiger-img01">
        <img src="https://i.ibb.co/Wkr8RPf/01.jpg" class="front" alt="tiger-img01">
        <img src="https://img.tukuppt.com/bg_grid/01/15/26/TYdecCl0wR.jpg!/fh/350" class="back" alt="myLogo">
      </div>
      <div class="memoryCard" data-image="tiger-img01">
        <img src="https://i.ibb.co/Wkr8RPf/01.jpg" class="front" alt="tiger-img01">
        <img src="https://img.tukuppt.com/bg_grid/01/15/26/TYdecCl0wR.jpg!/fh/350" class="back" alt="myLogo">
      </div>
      <div class="memoryCard" data-image="tiger-img02">
        <img src="https://i.ibb.co/R9ss1rg/02.jpg" class="front" alt="tiger-img02">
        <img src="https://img.tukuppt.com/bg_grid/01/15/26/TYdecCl0wR.jpg!/fh/350" class="back" alt="myLogo">
      </div>
      <div class="memoryCard" data-image="tiger-img02">
        <img src="https://i.ibb.co/R9ss1rg/02.jpg" class="front" alt="tiger-img02">
        <img src="https://img.tukuppt.com/bg_grid/01/15/26/TYdecCl0wR.jpg!/fh/350" class="back" alt="myLogo">
      </div>
      <div class="memoryCard" data-image="tiger-img03">
        <img src="https://i.ibb.co/b3kW2RX/03.png" class="front" alt="tiger-img03">
        <img src="https://img.tukuppt.com/bg_grid/01/15/26/TYdecCl0wR.jpg!/fh/350" class="back" alt="myLogo">
      </div>
      <div class="memoryCard" data-image="tiger-img03">
        <img src="https://i.ibb.co/b3kW2RX/03.png" class="front" alt="tiger-img03">
        <img src="https://img.tukuppt.com/bg_grid/01/15/26/TYdecCl0wR.jpg!/fh/350" class="back" alt="myLogo">
      </div>
      <div class="memoryCard" data-image="tiger-img04">
        <img src="https://i.ibb.co/rZ5fBQ9/sticker2.png" class="front" alt="tiger-img04">
        <img src="https://img.tukuppt.com/bg_grid/01/15/26/TYdecCl0wR.jpg!/fh/350" class="back" alt="myLogo">
      </div>
      <div class="memoryCard" data-image="tiger-img04">
        <img src="https://i.ibb.co/rZ5fBQ9/sticker2.png" class="front" alt="tiger-img04">
        <img src="https://img.tukuppt.com/bg_grid/01/15/26/TYdecCl0wR.jpg!/fh/350" class="back" alt="myLogo">
      </div>
      <div class="memoryCard" data-image="tiger-img05">
        <img src="https://i.ibb.co/JC67fzh/sticker3.png" class="front" alt="tiger-img05">
        <img src="https://img.tukuppt.com/bg_grid/01/15/26/TYdecCl0wR.jpg!/fh/350" class="back" alt="myLogo">
      </div>
      <div class="memoryCard" data-image="tiger-img05">
        <img src="https://i.ibb.co/JC67fzh/sticker3.png" class="front" alt="tiger-img05">
        <img src="https://img.tukuppt.com/bg_grid/01/15/26/TYdecCl0wR.jpg!/fh/350" class="back" alt="myLogo">
      </div>
      <div class="memoryCard" data-image="tiger-img06">
        <img src="https://i.ibb.co/nMpNFSK/sticker4.png" class="front" alt="tiger-img06">
        <img src="https://img.tukuppt.com/bg_grid/01/15/26/TYdecCl0wR.jpg!/fh/350" class="back" alt="myLogo">
      </div>
      <div class="memoryCard" data-image="tiger-img06">
        <img src="https://i.ibb.co/nMpNFSK/sticker4.png" class="front" alt="tiger-img06">
        <img src="https://img.tukuppt.com/bg_grid/01/15/26/TYdecCl0wR.jpg!/fh/350" class="back" alt="myLogo">
      </div>
      <div class="memoryCard" data-image="tiger-img07">
        <img src="https://i.ibb.co/VY8fktv/sticker.png" class="front" alt="tiger-img07">
        <img src="https://img.tukuppt.com/bg_grid/01/15/26/TYdecCl0wR.jpg!/fh/350" class="back" alt="myLogo">
      </div>
      <div class="memoryCard" data-image="tiger-img07">
        <img src="https://i.ibb.co/VY8fktv/sticker.png" class="front" alt="tiger-img07">
        <img src="https://img.tukuppt.com/bg_grid/01/15/26/TYdecCl0wR.jpg!/fh/350" class="back" alt="myLogo">
      </div>
      <div class="memoryCard" data-image="tiger-img08">
        <img src="https://i.ibb.co/4Vnym5g/sticker1.png" class="front" alt="tiger-img08">
        <img src="https://img.tukuppt.com/bg_grid/01/15/26/TYdecCl0wR.jpg!/fh/350" class="back" alt="myLogo">
      </div>
      <div class="memoryCard" data-image="tiger-img08">
        <img src="https://i.ibb.co/4Vnym5g/sticker1.png" class="front" alt="tiger-img08">
        <img src="https://img.tukuppt.com/bg_grid/01/15/26/TYdecCl0wR.jpg!/fh/350" class="back" alt="myLogo">
      </div>
    </div>
    <dic class="completed d-none">
      <div>恭喜完成!</div>
      <div class="img-group">
        <img src="https://i.ibb.co/KbJzTNx/complete.png" class="complete-book">
        <div class="group">
          <!-- Render in JS -->
        </div>
      </div>
      <button>再玩一次</button>
    </dic>

    <script src="main.js"></script>
</body>

</html>